<template>
  <a-popover placement="bottomRight" overlayClassName="filter-visible-popover" trigger="click">
    <template #content>
      <div><a-input v-model:value="keyword" placeholder="搜索字段(拖拽字段进行排序）" @input="inputChange" /></div>
      <div class="filter-visible-label">
        <strong>显示这些字段</strong>
        <label>
          <i class="iconfont icon-shouqi"></i>
          <span>重置</span>
        </label>
      </div>

      <div class="filter-visible-column">
        <VueDraggable v-model="list" :animation="300" handle=".handle" ghostClass="ghost" class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded">
          <div v-for="item in list" :key="item.id" class="cursor-move h-30 bg-gray-500/5 rounded p-3">
            <div v-if="item.type !== SEQ && !item.hidden" class="filter-visible-item">
              <div class="filter-visible-checkbox"><Item :value="!item.visible" :title="item.title" :item="item" /></div>
              <div class="handle cursor-move filter-visible-handle">
                <span class="filter-visible-top">置顶</span>
                <i class="iconfont icon-shouqi"></i>
              </div>
            </div>
          </div>
        </VueDraggable>
        <preview-list :list="list" />
      </div>
      <div class="filter-visible-button">
        <a-space :size="8">
          <a-button @click="cancel">取消</a-button>
          <a-button type="primary" :loading="loading" @click="comfirm">保存</a-button>
        </a-space>
      </div>
    </template>
    <i class="iconfont icon-shouqi filter-visibel-handel"></i>
  </a-popover>
</template>

<script setup lang="ts">
  import { PropType, ref, onMounted } from "vue"
  import { debounce } from "lodash-es"
  import { VueDraggable } from "vue-draggable-plus"
  import { SEQ } from "@/constant/index"
  import type { columnInterface } from "../interface"
  import { dataTypes } from "@/utils/index"
  import Item from "./item.vue"
  const props = defineProps({
    column: {
      type: Array<columnInterface>,
      default: () => [],
    },
    table: {
      type: Object,
      default: () => ({}),
    },
    columnSort: {
      type: Function as PropType<(data: columnInterface) => Promise<any>>,
      default: "",
    },
  })

  const emit = defineEmits(["column-sort"])
  // 备份
  const backupColumns = JSON.stringify(props.column)
  const list = ref(JSON.parse(backupColumns))
  const loading = ref(false)
  const keyword = ref("")

  onMounted(() => {
    console.log(list.value)
  })
  /**
   * input
   */
  const inputChange = debounce(function () {
    list.value.forEach((item) => {
      item.hidden = !(item.title.indexOf(keyword.value) !== -1)
    })
  }, 200)
  /**
   * cancel
   */
  const cancel = () => {
    keyword.value = ""
    list.value.forEach((item) => (item.hidden = false))
  }
  /**
   * 保存
   */
  const comfirm = () => {
    const isFunction = dataTypes().isFunction(props.columnSort)
    if (!isFunction) {
      return false
    }
    loading.value = true
    props
      .columnSort(list.value)
      .then(() => {
        emit("column-sort", JSON.parse(JSON.stringify(list.value)))
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }
</script>
<style lang="scss">
  .filter-visibel-handel {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    background-color: var(--n-white);
    width: var(--vxe-ui-table-header-height-default);
    height: var(--vxe-ui-table-header-height-default);
    cursor: pointer;
  }
  .filter-visible-popover {
    width: 240px;
    padding-top: 0 !important;
    .ant-popover-arrow {
      display: none;
    }
    .ant-popover-inner {
      padding: 8px !important;
    }
  }
  .filter-visible-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    margin: 16px 0 4px 0;
    strong {
      color: var(--n-black-light-2);
    }
    i {
      width: 16px;
      height: 16px;
      margin-right: 4px;
      color: var(--n-primary);
    }
    label {
      cursor: pointer;
      color: var(--n-black-light-3);
    }
  }
  .filter-visible-column {
    max-height: 450px;
    overflow-y: autl;
    overflow-x: hidden;
    margin: 0 -8px;
  }
  .filter-visible-top {
    color: var(--n-primary);
    margin-right: 8px;
    transition: var(--n-transition);
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    + i {
      cursor: n-resize;
    }
  }
  .filter-visible-item {
    transition: 0.5s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5.5px 16px;
    transition: var(--n-transition);
    &:hover {
      background-color: var(--n-primary-bg);
      .filter-visible-top {
        opacity: 1;
        visibility: visible;
      }
    }
    .ant-checkbox + span {
      @include ell();
    }
  }
  .filter-visible-checkbox {
    flex: 1;
    width: 0;
    @include ell();
  }
  .ghost {
    opacity: 0.1;
    background: #c8ebfb;
  }
  .filter-visible-button {
    text-align: right;
    margin: 8px 0 0 0;
  }
</style>
